草庐IT

css - XSLT与CSS显示XML

全部标签

javascript - 在 CSS 中保持纵横比的同时将图像调整到容器大小?

我有一堆不同(未知)尺寸的图像。我想将这些图像放到一个div中,并让它们自动符合div的尺寸,同时保持它们的纵横比。换句话说,如果图像宽度大于高度,则宽度将为100%,高度将相应缩放。如果图像高于宽度,高度将为100%,宽度将相应缩放。有没有办法在纯css中做到这一点?谢谢 最佳答案 使用css属性max-width和max-height图片上的图标将带您到达您需要去的地方。fiddlehttp://fiddle.jshell.net/sHAQ9/HTMLCSSdiv{width:150px;height:150px;overflo

javascript - 读取 JSON Tiled map 编辑器文件并显示到 Canvas

我正在关注这个this能够在我的javascript/canvas游戏中加载由平铺map编辑器创建的jsonmap文件的教程。我已经实现了我自己的版本,并且在控制台或网络等中的firebug中没有出现任何错误。据我所知,通过放入console.logs和警报,脚本运行得非常好!问题是Canvas保持空白!当它现在应该有一个tilemap时。这是我在游戏中实现的教程版本:functionLevel(){varc;vardata;varlayers=[];this.get_map=function(name,ctx){c=ctx;$.getJSON('maps/'+name+'.json'

javascript - 使用 Javascript 在网页上显示另一台计算机的时间?

这个问题在这里已经有了答案:Clockonwebpageusingserverandsystemtime?(8个答案)关闭9年前。我正在开发一个对时间非常敏感的Web应用程序。给我的业务规则之一是应用程序的行为必须始终取决于Web服务器上的时间,而不管客户端的时钟是什么时间。为了让用户清楚这一点,我被要求在Web应用程序中显示服务器的时间。为此,我编写了以下Javascript代码:clock=(function(){varhours,minutes,seconds;functionsetupClock(updateDisplayCallback){getTimeAsync(getTi

javascript - 从显示 :none to display:block 开始时使用 Javascript 淡入元素

我有一个脚本,在按下单选按钮时显示一个元素。我正在尝试淡化元素的显示,这样它就不会那么突兀。JS:document.getElementById('next').style.display='block';document.getElementById('next').fadeIn(1000);除了动画淡入淡出外,这工作正常。我究竟做错了什么。我试过将这两个语句合并为一个语句,我也试过在display:block之前设置淡入,但它根本不显示。对JS还是相当陌生,所以我只是想弄清楚什么是可能的。提前致谢 最佳答案 DOM元素上没有.f

javascript - 检测在不可见和在视口(viewport)外时是否对canvas/css3动画进行了优化

我假设使用HTML5中的所有这些硬件加速动画,实际上不会渲染在视口(viewport)之外运行的动画。我希望能够检测到是否正在发生。我尝试在每秒移动100px的对象上循环使用webkitCSSMatrix来尝试确定每个刻度线移动了多少像素,但是如果我将动画移出视线则没有区别。有任何想法吗? 最佳答案 您可以使用单独的计时器测试来查看伪经验方面在外部和内部绘制的对象之间的差异(计时器实际上并不能证明任何东西,但可以为您提供强大的indisium)。但是,了解Canvas的工作原理也可以为您提供坚实的指导。例如,Canvas是一个简单的

javascript - jQuery/CSS 动画 div 从左到右的宽度

我正在尝试使用jQuery为div设置动画,背景图片的宽度从左到右逐渐减小,同时绝对定位。我需要使其与IE8兼容,因此使用jQuery。这是一个基本的JSFiddle演示链接,包含我目前所拥有的内容,但它是从右到左动画的:JSFiddlelinkjQuery(document).ready(function($){$(document).on('click','.splat',function(e){$(this).animate({width:"0px"},800);});});.splat{width:400px;height:400px;background:blue;posit

JavaScript:控制台中显示的原型(prototype)函数

我刚刚注意到,当我记录当前正在处理的对象的一个​​实例时,我在它的属性之后看到了原型(prototype)函数(它只有一个)。这让我觉得我做错了什么。这就是我设置原型(prototype)的方式。MF=function(x){if(!(thisinstanceofMF))returnnewMF(x);this.node=x;}MF.prototype={show:function(display){display?this.node.style.display=display:this.node.style.display='block';},hide:function(){this.

javascript - Typeahead 将结果显示为未定义

我正在尝试使用typeahead来显示谷歌建议。Ajax调用工作正常并且数据正确返回:在执行returnprocess(data);之前数据包含以“w”开头的字符串数组。data=["walmart","weather","wellsfargo","worldstarhiphop","walgreens","wikipedia","whitepages","worldcup","webmd","weatherradar"]但是显示的建议显示“未定义”而不是真实的单词。知道我在这里缺少什么吗?谢谢。$('.typeahead').typeahead({hint:true,highligh

javascript - css动画后点击事件丢失

为了开玩笑,我在我的一个网站上放了一个Google-eskbarrelroll。第一次单击所选元素时一切正常,但之后不会再次触发。我试过.click、.on('click',function(){})都没有用。关于如何解决以及为什么会发生这种情况的任何想法?BasicjsFiddlehere源代码示例;RollMe$(function(){$('#roll').on('click',function(){$('body').css({"-moz-animation-name":"roll","-moz-animation-duration":"4s","-moz-animation-i

javascript - window.onload 工作,但 Chrome 控制台显示 : Uncaught TypeError: window. onload 不是函数

我想在页面加载时运行getLocation()方法。我添加了:window.onload(getLocation());并按照我的意愿调用了该函数,但Chrome控制台显示:UncaughtTypeError:window.onloadisnotafunction(anonymousfunction)@(index):116window.onload(getLocation());View位于底部:@{ViewBag.Title="HomePage";}GecodingDemoJavaScript:@sectionScripts{varx=document.getElementById